<template>           
  <div id="about">
    <!-- 头部轮播图-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in lunbo" :key="index">
          <img class="swiper-slide-img"  :src="item" alt="activity">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 通知 栏 -->
    <div class="notice" >
      <img class="horn" src="./assets/ic_Push.png"/>
      <div class="notice-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in inform" :key="index">
            <span class="notice_text">{{item.detail}}</span>
          </div>
        </div>
     </div>
    </div>
    <!-- 预定下单 举办投诉 在线客服-->
    <div class="item_list" >
        <div class="item"><img src="./assets/ic_Order.png" class="item_img" @click="toOrder()"/><span>预定下单</span></div>
        <div class="item"><img src="./assets/ic_Report.png" class="item_img" @click="toComplain()"/><span>举报投诉</span></div>
        <div class="item" @click="server()"><img src="./assets/ic_Customerservice.png" class="item_img" alt="九合道科技在线咨询" title="九合道科技在线咨询"/><span>在线客服</span></div>
    </div>
    <!-- 产品详情 -->
    <div class="product_details">
      <div class="product_header">
        <span class="product_line"></span>
        <span class="product_title">产品详情</span>
        <span class="product_line"></span>
      </div>
      <Product
        v-for='(product, index) in productList'
        :key="index"
        :description="product.description"
        :name="product.name"
        :oldPractice="product.price"
        :newPractice="product.price"
        :id="product.id"
        :thumbnailPath="`http://www.nineunity.com${product.thumbnailPaths[0]}`"
      />
    </div>
    <div  class="product_details">
      <div style="text-align: center;padding:10px 0;background: #fff;">
        <img src="./assets/forget.png"  style="width:60%"/>
      </div>
      <img src="./assets/zhenhan.jpg"  style="width:100%"/>
    </div>
    <MyFooter />
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import '../../css/layout.css'
import '@/utils/rem.js';
import GoodsService from '_common/services/goods.js';
import MyFooter from '_components/footer/footer';
import Product from '_components/product/product';
import Other from '_common/services/other'
import base from '_common/services/base';
const apiUrl = base.test;
export default {
  	name: 'about',
  	data() {
      return {
        gList: [],
        inform: [],
        lunbo: [],
        productList: [],
      }
  	},
  	computed: {
    },
    beforeCreate() {
      Other.getInform().then(res => {
        if (res && res.code === 0) {
            this.inform = res.data.data
          }
        this.$nextTick(() => {
          const mySwiper = new Swiper ('.notice-container', {
              loop: true, // 循环模式选项
              autoplay: true,//可选选项，自动滑动
              direction: 'vertical',
            });
          })
        }, reject => {});
      Other.getLunBo().then(res => {
        if (res && res.code === 0) {
            this.lunbo = res.data.map(item => `${apiUrl}${item}`);
          }
        this.$nextTick(() => {
          const mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: true,//可选选项，自动滑动
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            }
          });
        }
      )
        }, reject => {});
    },
    mounted(){
        GoodsService.getGoodsList().then(res => {
            if (res && res.code === 0) {
              let data = res.data
              this.productList = res.data.data;
            }
            else {
              this.$alertTip(res.msg || '获取投诉列表失败请稍后再试')
            }
          },reject => {
            this.$alertTip('获取投诉列表失败请稍后再试')
          })
    },
    methods: {
      server () {
        global.window.location.href='http://wpa.qq.com/msgrd?v=3&uin=2760575200&site=qq&menu=yes';
      },
      toOrder() {
        this.$openRouter({
            name: 'goodsDetail',
            query: {
              goodsId: '5246848670536908',
            }
			  });
      },
        toComplain() {
        this.$openRouter({
            name: 'complain',
			  });
      }
    },
    components: {
      MyFooter,
      Product
    }
}
</script>

<style lang="less">
@import	"../../css/common";
#about {
  padding-bottom: 3.333333rem;
  .header {
    height: 2.666667rem;
    color: @color;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .logo {
      position: absolute;
      top: 50%;
      left: .8rem;
      transform: translateY(-50%);
      height: 1.333333rem;
      width: 1.333333rem;
      border-radius: 1.333333rem;
      background-color: gray;
    }
    .header_title {
      font-size: 1.2rem;
    }
  }
  .swiper-container {
    width: 100%;
    height: 10.666667rem;
    .swiper-wrapper {
      width: 100%;
      .swiper-slide {
        width: 100%;
        .swiper-slide-img {
          width: 100%;
          height: 10.666667rem;
        }
      }
    }
    .swiper-pagination {
      >span {
        width: .466667rem;
        height: .466667rem;
        display: inline-block;
        border-radius: 100%;
        margin-right: .666667rem;
      }
      .swiper-pagination-bullet {
        background: #fff;
        opacity: 0.8;
      }
      .swiper-pagination-bullet-active {
        background-color: #f3a13a;		
      }
    }		
  }
  .notice {
    height: 2.4rem;
    color: @color;	
    font-size: .933333rem;
    border-bottom: .033333rem solid @line-color;
    display: flex;
    align-items: center;
    background-color: #fff;
    .horn {
      margin: 0 .8rem;
      width: 1.1rem;
    }
    .notice-container {
      height: 2.4rem;
      flex: 1;
      overflow: hidden;
      .swiper-wrapper {
        width: 100%;
        height: 2.4rem;
        .swiper-slide {
          width: 100%;
          height: 2.4rem;
          .notice_text {
            display: flex;
            align-items: center;
            height: 2.4rem;
          }
        }
      }
    }
  }
  .item_list {
    padding: 1.066667rem 2.733333rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: .933333rem;
      .item_img {
        width: 3.333333rem;
      }
      >span {
        font-size: .933333rem;
        color: @color;
      }
    }
  }
  .product_details {
    padding-top: .666667rem;
    background-color: @light-color;
    //padding-bottom: 1.666667rem;
    .product_header {
      background-color: #fff;
      width: 100%;
      height: 2.666667rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: .033333rem solid @line-color;
      .product_line {
        display: inline-block;
        height: .033333rem;
        width: 2rem;
        margin: 0 .266667rem;
        background-color: @line-color;
      }
    }
  }

}

</style>